<template>
	<view class="container">
		<view class="header flex flex-align flex-center">请填写姓名手机号等相关信息</view>
		<view class="main">
			<view class="list flex flex-align">
				<view class="left">姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="name" />
			</view>
			<view class="list flex flex-align">
				<view class="left">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" />
			</view>
			<!-- <view class="list flex flex-align">
				<view class="left">微信号</view>
				<input type="text" placeholder="请输入微信号" v-model="wetchat" />
			</view> -->
			<view class="list flex flex-align">
				<view class="left">社区名称</view>
				<input type="text" placeholder="请输入社区名称" v-model="sheName" />
			</view>
			<view class="list flex flex-align">
				<view class="left">代理邀请码</view>
				<input type="text" placeholder="请输入代理邀请码" v-model="inviter_code" />
			</view>
			<view class="list flex flex-align flex-bt" style="position: relative;">
				<view class="left flex flex-align" style="width: 660rpx;">
					<view class="name" style="width: 150rpx;">所在位置</view>
					<input type="text" :disabled="true" placeholder="请输入所在位置" v-model="address" />
				</view>
				<view class="right">
					<tui-icon name="arrowright" color="#999" :size="28"></tui-icon>
				</view>
				<view @click="showMulLinkageThreePicker" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 11;background: transparent;"></view>
			</view>
			<view class="list flex flex-align">
				<view class="left">详细地址</view>
				<input type="text" placeholder="请输入详细地址" v-model="addInfo" />
			</view>
			<view class="list flex " style="height: auto;padding: 20rpx 0;">
				<view class="left">门头照</view>
				<image :src="images" mode="" style="width: 200rpx;height: 200rpx;" @click="uploadpic"></image>
			</view>
			<view class="btns" @click="submite">{{status==2?'审核中':'提交申请'}}</view>
		</view>
		<mpvue-city-picker themeColor="#222" ref="mpvueCityPicker"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	// var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	// var qqmapsdk;
	import wx from 'jweixin-module'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				name: '',
				phone: '',
				wetchat: '',
				sheName: '',
				address: '',
				addInfo: '',
				longitude:'',
				latitude:'',
				status:'',
				images:'/static/up_img.png',
				inviter_code:''
			}
		},
		onLoad(e) {
			// qqmapsdk = new QQMapWX({
			// 	key: 'KG3BZ-MIYLZ-VDCXE-72RBD-S3LTS-LYBZM'
			// });
			this.getData()
			this.getAddress()
		},
		methods: {
			getData(){
				let that = this
				that.tui.request("api.auth.live/communityInfo", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.status =res.data.info.status						
						if(res.data.info.status==2){
							that.name = res.data.info.name
							that.phone = res.data.info.phone
							that.wetchat = res.data.info.wx_code
							that.longitude = res.data.info.longitude
							that.latitude = res.data.info.latitude
							that.sheName = res.data.info.community_name
							that.address = res.data.info.address_area
							that.addInfo = res.data.info.address
							that.images = res.data.info.image
							that.inviter_code = res.data.info.inviter_code
						}
					}
				
				}).catch((res) => {
				
				})
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onBackPress() {
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
			  }
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				console.log(e[0].province)
				let that = this
				that.address = e[0].province+e[0].city+e[0].area
			},
			submite() {
				let that = this
				if(that.status==2){
					return
				}
				console.log(that.images)
				if(that.images=='/static/up_img.png'){
					that.tui.toast('门头照不能为空')
					return
				}
				that.tui.request("api.auth.live/communityApply", "POST", {name:that.name,phone:that.phone,wx_code:that.wetchat,longitude:that.longitude,latitude:that.latitude,community_name:that.sheName,address_area:that.address,address:that.addInfo,image:that.images,inviter_code:that.inviter_code}, false, false, true).then((res) => {
					console.log(res)
					that.tui.toast(res.info)
					if(res.code==1){
						that.getData()
					}

				}).catch((res) => {

				})
			},
			uploadpic(){
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						// that.headerimg = res.tempFilePaths[0];
						let tempFilePaths = res.tempFilePaths[0];
						that.tui.uploadFile("api.data/upload",tempFilePaths).then((res) => {
							if(res.code==1){
								that.images = res.data.url
							}
						}).catch((res) => {})
					}
				});
			},
			
			/**
			 * 下载小程序新版本并重启应用
			 */
			
			wxReady() {
				let that = this	
				wx.ready(function() {
					wx.getLocation({
					  type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					  success: function (ddd) {
							that.longitude = ddd.longitude
							that.latitude = ddd.latitude
					  }
					});
				});
				
			},
			getAddress() {
				let that = this
				if(that.status==2){
					return
				}
				var surl = location.href.split('#')[0];
				that.tui.request("api.auth.live/scan", "POST", {url:surl}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						wx.config({
						  debug: false, // 是否开启调试模式
						  appId: res.data.info.appId, // 必填，公众号的唯一标识
						  timestamp: res.data.info.timestamp, // 必填，生成签名的时间戳
						  nonceStr: res.data.info.nonceStr, // 必填，生成签名的随机串
						  signature: res.data.info.signature, // 必填，签名，见附录1
						  jsApiList: res.data.info.jsApiList
						})
						that.wxReady()
					}
				}).catch((res) => {
					
				})
				
				// uni.getLocation({
				// 	type: "gcj02",
				// 	success(res) {
				// 		console.log(res);
				// 		qqmapsdk.reverseGeocoder({
				// 			location: {
				// 				latitude: res.latitude,
				// 				longitude: res.longitude
				// 			},
				// 			success: function(res1) {
				// 				console.log(res1.result);

				// 			},
				// 			fail: function(res) {
				// 				console.log(res);
				// 			}
				// 		})
				// 	},
				// 	fail(err) {

				// 	}
				// });
			},
			formatLocation(longitude, latitude) {
				if (typeof longitude === 'string' && typeof latitude === 'string') {
					longitude = parseFloat(longitude)
					latitude = parseFloat(latitude)
				}

				longitude = longitude.toFixed(2)
				latitude = latitude.toFixed(2)

				return {
					longitude: longitude.toString().split('.'),
					latitude: latitude.toString().split('.')
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.header {
		height: 180rpx;
		color: #fff;
		background: #fe3b0f;
		font-size: 32rpx;
	}

	.main {
		margin: 30rpx;

		.list {
			height: 100rpx;
			border-bottom: 1px solid #eee;

			.left {
				width: 150rpx;
			}

			view,
			input {
				font-size: 28rpx;
			}
			input {
				width: 500rpx;
			}
		}

		.btns {
			background: #fe3b0f;
			color: #fff;
			font-size: 28rpx;
			line-height: 90rpx;
			border-radius: 90rpx;
			width: 600rpx;
			margin: 50rpx auto;
			text-align: center;
		}
	}
</style>